<template>
	<view class="page">
		<!-- 搜索 -->
		<view class="search-head">
<!-- 			<view class="back" @click="onBack">
				<text></text>
			</view> -->
			<view class="search">
				<view class="icon">
<!-- 						<text class="iconfont icon-"></text> -->
					<image  :src="OSS_HOST+'icon/icon_sousuo.png'"  mode=""></image>
				</view>
				<input type="text" v-model="keyword" placeholder="热门搜索词条" />
			    <view class="icon1"  @click="onSkip('paycode')">
				<image :src="OSS_HOST+'icon/icon_saoyisao.png'"   mode=""></image>
			    </view>					
			</view>
			<view class="cut" @click="isList = !isList">
				<text class="iconfont" :class="isList?'icon-shitu01':'icon-shitu02'"></text>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="screen-info">
			<view class="screen-list">
<!-- 				<view class="list" :class="{'action':screenShow===0}" @click="onSynthesize(0)">
					<text>综合</text>
					<text class="iconfont icon-sanjiao icon_z"></text>
				</view> -->
				<view class="list">
					<text>销量</text>
					<text></text>
				</view>
				<view class="list" @click="change()">
					<text>价格</text>
					<view class="icon_j">
					<image  :src="OSS_HOST+sortImage"  mode=""></image>
<!-- 						<text class="iconfont icon-sanjiao up"></text>
						<text class="iconfont icon-sanjiao down"></text> -->
					</view>
				</view>
				<view class="list" @click="isDrawer = true">
					<text>筛选</text>
					<text class="iconfont icon-shaixuan icon_s"></text>
				</view>
			</view>
			<!-- 筛选弹窗 -->
			<view class="screen-popup" @click.stop="isScreen = false" v-show="isScreen">
				<view class="synthesize">
					<view class="list">
						<text class="check"></text>
						<text class="title">综合排序</text>
					</view>
					<view class="list">
						<text class="check"></text>
						<text class="title">评论数从高到低</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-data">
			<mescroll-body ref="mescrollRef"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
				:down="downOption"
				:up="upOption"
				:top="0">
				<view class="goods-list">
					<view :class="isList?'list-view':'list-li'" v-for="(item,index) in goodsList" @tap="onGoodsList(item.id,index)" :key="index">
						<view class="pictrue">
							<image :src="item.img" mode="heightFix"></image>
						</view>

							<view class="title-tag">
								<view class="tag">
									<text v-if="item.is_goods === 1">处方药</text>
									{{item.name}}
								</view>
							</view>
						<view class="price-info">
							<view class="price">
								<text class="selling-price">￥{{item.price}}</text>
								<text class="original-price">￥{{item.cost}}</text>
								<text class="sales">已售{{item.number||100}}件</text>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- 抽屉 -->
		<view class="cu-modal drawer-modal justify-end" :class="{'show':isDrawer}" @click="isDrawer = false" style="position: absolute;">
			<view class="cu-dialog basis-lg" @click.stop="isDrawer = true">
				<view class="serve">
					<view class="title">
						<text>服务</text>
					</view>
					<view class="serve-list">
						<view class="list action">
							<text>会员专享</text>
						</view>
						<view class="list">
							<text>新人优惠</text>
						</view>
						<view class="list">
							<text>防疫物资</text>
						</view>
					</view>
				</view>
				<view class="price-screen">
					<view class="title">
						<text>价格区间</text>
					</view>
					<view class="price-section">
						<input type="number" placeholder="最低价格">
						<text></text>
						<input type="number" placeholder="最高价格">
					</view>
				</view>
				<view class="operation-btn">
					<view class="btn" @click.stop="isDrawer = false">
						<text>重置</text>
					</view>
					<view class="btn action">
						<text>确定筛选</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {oss_host} from '@/config/config.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				OSS_HOST: oss_host,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
				},
				// 列表视图切换
				isList: true,
				// 筛选弹窗
				isScreen: false,
				// 筛选切换
				screenShow: 0,
				// 抽屉
				isDrawer: false,
				keyword: '',
				property_id:'',
				page:0,
				lastPage:0,
				sortIndex:0,
				sortImage:'icon/icon_search_weixuan.png',
				goodsList:[
				  {
					id: 1,
					name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
					cost: '219.00',
					price: '129.00',
					img: '/static/img/goods_thumb_01.png',
					is_goods: 1,
				  },
				  {
					id: 2,
					name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
					cost: '219.00',
					price: '50.00',
					img: '/static/img/goods_thumb_01.png',
					is_goods: 0,
				  },
				  {
				  					id: 2,
				  					name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
				  					cost: '219.00',
				  					price: '70.00',
				  					img: '/static/img/goods_thumb_01.png',
				  					is_goods: 0,
				  },
				],
			}
		},
		onLoad(e) {
			console.log(e)
			this.keyword = decodeURIComponent(e.keyword||'');
			this.property_id = e.property_id
			// this.getList()
		},
		
		methods: {
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				this.mescroll.endSuccess();
			},
			onReachBottom(){
				 // 分页 上拉加载
			  if (this.page >= this.lastPage) {
					// console.log(1111111)
			  	uni.showToast({
			  		icon: 'none',
			  		title: '没有更多数据'
			  	});
			  	return;
			  }
			  
			  this.getList();
			  
			},
			
			/**
			 * 返回点击
			 */
			onBack(){
				uni.navigateBack();
			},
			/**
			 * 综合点击
			 * @param {Number} type
			 */
			onSynthesize(type){
				this.screenShow = type;
				this.isScreen = !this.isScreen;
			},
			/**
			 * 
			 * */ 
			 getList(){
				const _this = this
				if(_this.keyword ){
					this.property_id = ''
				}	 
				var opt = {
					url: '/product/getList', 
					data:{
						property_id:this.property_id||'',
						lat:this.latitude || 22.81194,
						lng:this.longitude||108.393005,
						page:++_this.page,
						searchName:_this.keyword
						// adv_channel:this.adv_channel
					},
					success: function(res) { 
					 
						if (res.status == 1) { 
							 let result = res.data
							 _this.page =result.page
							 _this.lastPage = result.last_page
							
								if(_this.page == 1){
									_this.goodsList = result.list 
								}else{
									_this.goodsList=_this.goodsList.concat(result.list)
								} 
							
							
							
							
							
							
						}  
						// _this.skeletonShow = false;
					}
				};
						
				
				this.$service.GetApi(opt) //网络 
			 },
			/**
			 * 商品列表点击
			 */
			onGoodsList(id,index){
				// uni.navigateTo({
				// 	url: '/pages/GoodsDetails/GoodsDetails',
				// 	animationType: 'zoom-fade-out',
				// 	animationDuration: 200
				// })
				let _this = this
				
				_this.$refer.setVilit('/pages/GoodsDetails/GoodsDetails')
				let callback = function(url) {
					_this.$refs.popupvLogin.open()
				}
				let data = {
					id:id,
					
				}
				_this.$refer.toUrl(callback, data)
			},
			
			//价格排序功能
			change(){
				console.log(this.sortIndex)
				if(this.sortIndex===0){
					this.sortIndex=1
					this.sortImage='icon/icon_shaixuan_congdidaogao.png'
					this.goodsList.sort(function(a,b){
						return a.price-b.price
					})
				}else if(this.sortIndex===1){
					this.sortIndex=2
					this.sortImage='icon/icon_shaixuan_conggaodaodi.png'
					this.goodsList.sort(function(a,b){
						return b.price-a.price
					})
				}else if(this.sortIndex===2){
					this.sortIndex=0
					this.sortImage='icon/icon_search_weixuan.png'
					this.goodsList.sort(function(a,b){
						return Math.random()-0.5;
					})					
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import  'SearchGoodsList.scss';
</style>
